<template>
  <div class="mine">
    <div class="banner-mine">
      <div class="header-img">
        <div class="header-img-box flex-box">
          <div>
            <div class="header-index"><img src="../assets/img/tx-a001.jpg"><span><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenzheng-doctor"></use>
              </svg></span></div>
            <p>Johnzhang</p>
          </div>
        </div>
      </div>
    </div>
    <div class="list-mine">
      <ul class="flex-box">
        <li @click="$router.push('/mineAsk')">
          <div class="mine-icon01"><span class="flex-box"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-tiwenx-aa"></use></svg></span></div>
          <p>提问</p>
        </li>
        <li>
          <div class="mine-icon02"><span class="flex-box"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-pangting-aa"></use></svg></span></div>
          <p>旁听</p>
        </li>
        <li @click="$router.push('/answer')">
          <div class="mine-icon03"><span class="flex-box"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-huida-aa"></use></svg></span></div>
          <p>回答</p>
        </li>
        <li @click="$router.push('/mineConcern')">
          <div class="mine-icon04"><span class="flex-box"><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-guanzhu-aa"></use></svg></span></div>
          <p>关注</p>
        </li>
      </ul>
    </div>
    <div class="lists-all">
      <ul>
        <li class="flex-box" @click="$router.push('/mineShouRu')"><a href="#"><span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-wodeshourux"></use></svg></span>我的收入</a><span>
              <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-jiantou2"></use></svg>
            </span></li>
        <li class="flex-box" @click="$router.push('/mineChongZhi')"><a href="#"><span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-woyaoduihuanx"></use></svg></span>我要充值</a><span>
              <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-jiantou2"></use></svg>
            </span></li>
        <li class="flex-box" @click="$router.push('/mineInfo')"><a href="#"><span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-gerenxinxix"></use></svg></span>个人信息</a><span>
              <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-jiantou2"></use></svg>
            </span></li>
        <li class="flex-box" @click="$router.push('/mineApply')"><a href="#"><span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-shenqingrenzhengx"></use></svg></span>申请认证</a><span>
              <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-jiantou2"></use></svg>
            </span></li>
        <li class="flex-box" @click="$router.push('/mineHelp')"><a href="#"><span><svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-weibiaoti-"></use></svg></span>需要帮助</a><span>
              <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-wenzheng-jiantou2"></use></svg>
            </span></li>
      </ul>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
export default {
  name: 'home',
  data() {
    return {
      lists: ''
    }
  },
  computed: {},
  methods: {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.mine {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  padding-bottom: 50px;
  .banner-mine {
    width: 100%;
    background-size: 100%;
    .header-img {
      width: 100%;
      padding-bottom: 42%;
      position: relative;
      background: url(../assets/img/index-banner-bg.png) center no-repeat;
      .header-img-box {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        .header-index {
          width: 70px;
          height: 70px;
          border-radius: 70px;
          border: 2px solid #fff;
          margin-top: -16px;
          position: relative;
          img {
            width: 100%;
            height: 100%;
            border-radius: 70px;
            position: absolute;
          }
          span {
            display: block;
            width: 19px;
            height: 19px;
            border-radius: 100px;
            background: -webkit-linear-gradient(left, #86d1fc, #4ea4f7); /* Safari 5.1 - 6.0 */
            background: linear-gradient(right, #86d1fc, #4ea4f7); /* 标准的语法 */
            color: #fff;
            line-height: 20px;
            margin-left: 4px;
            font-size: 14px;
            text-align: center;
            position: absolute;
            right: -1px;
            bottom: -1px;
            z-index: 6;
          }
        }
        p {
          text-align: center;
          width: 100%;
          font-size: 14px;
          line-height: 26px;
          color: #fff;
        }
      }
    }
  }
  .list-mine {
    max-width: 750px;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
    margin: 0 auto;
    z-index: 5;
    box-sizing: border-box;
    ul {
      margin-top: -26px;
      width: 100%;
      height: 100px;
      padding-left: 10px;
      padding-right: 10px;
      box-sizing: border-box;
      border-radius: 12px;
      background: #fff;
      box-shadow: 0 4px 24px rgba($color: #000000, $alpha: 0.08);
      justify-content: space-around;
      li {
        text-align: center;
        div {
          width: 24px;
          height: 24px;
          color: #fff;
          font-size: 18px;
          display: inline-block;
          position: relative;
          z-index: 2;
          span {
            width: 100%;
            height: 100%;
            position: absolute;
            border-radius: 24px;
            top: 0;
            left: 0;
            z-index: 2;
          }
          &::after {
            position: absolute;
            bottom: 0;
            left: 1px;
            width: 12px;
            height: 12px;
            z-index: 1;
            content: '';
          }
          &.mine-icon01 {
            &::after {
              background: #ffe2ac;
            }
            span {
              background: -webkit-linear-gradient(left, #ffc95a, #ffbb52);
              background: linear-gradient(right, #ffc95a, #ffbb52);
            }
          }
          &.mine-icon02 {
            &::after {
              background: #afeae0;
            }
            span {
              background: -webkit-linear-gradient(left, #7edfcf, #4acdb7);
              background: linear-gradient(right, #7edfcf, #4acdb7);
            }
          }
          &.mine-icon03 {
            &::after {
              background: #b3dbfc;
            }
            span {
              background: -webkit-linear-gradient(right, #86d1fc, #4ea4f7);
              background: linear-gradient(left, #86d1fc, #4ea4f7);
            }
          }
          &.mine-icon04 {
            &::after {
              background: #fdc5bd;
            }
            span {
              background: -webkit-linear-gradient(right, #fa9973, #fa7386);
              background: linear-gradient(left, #fa9973, #fa7386);
            }
          }
        }
        p {
          font-size: 14px;
          color: #666666;
          margin-top: 12px;
        }
      }
    }
  }
  .list-mine-zhuanjia {
    ul li {
      div {
        &.mine-icon04 {
          &::after {
            background: #ffe2ac;
          }
          span {
            background: -webkit-linear-gradient(left, #ffc95a, #ffbb52);
            background: linear-gradient(right, #ffc95a, #ffbb52);
          }
        }
        &.mine-icon02 {
          &::after {
            background: #afeae0;
          }
          span {
            background: -webkit-linear-gradient(left, #7edfcf, #4acdb7);
            background: linear-gradient(right, #7edfcf, #4acdb7);
          }
        }
        &.mine-icon01 {
          &::after {
            background: #b3dbfc;
          }
          span {
            background: -webkit-linear-gradient(right, #86d1fc, #4ea4f7);
            background: linear-gradient(left, #86d1fc, #4ea4f7);
          }
        }
        &.mine-icon03 {
          &::after {
            background: #fdc5bd;
          }
          span {
            background: -webkit-linear-gradient(right, #fa9973, #fa7386);
            background: linear-gradient(left, #fa9973, #fa7386);
          }
        }
      }
    }
  }
  .lists-all {
    max-width: 750px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    margin-top: 6px;
    padding-bottom: 60px;
    ul {
      width: 100%;
      overflow: hidden;
      li {
        width: 100%;
        height: 56px;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        font-size: 14px;
        color: #666666;
        &:last-child {
          border-bottom: none;
        }
        a {
          text-decoration: none;
          color: #666666;
          span {
            font-size: 20px;
            color: #cccccc;
            line-height: 16px;
            margin-right: 12px;
          }
        }
        & > span {
          font-size: 24px;
          transform: rotateZ(180deg);
          color: #ccc;
        }
      }
    }
  }
  .mui-content .mine-question {
    top: 10px;
    #sliderSegmentedControl {
      height: 56px;
      .mui-scroll {
        height: 100%;
        a {
          line-height: 46px;
          font-size: 16px;
        }
        .mui-active {
          color: #000;
          font-weight: bold;
          &::after {
            background: #000;
          }
        }
      }
    }
    .scroll-line {
      height: 10px;
      width: 100%;
      left: 0;
    }
  }
}
</style>
